<template>
  <div class="app-container">
    <el-form :inline="true" :model="search">
        <el-form-item label="课程ID">
          <el-input v-model="search.id"></el-input>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input v-model="search.name"></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="searchOn">查询</el-button>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="fetchData">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetOn">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="add">添加</el-button>
        </el-form-item>
    </el-form>
    
    <br />
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="昵称" width="80" prop="nickname" />
      <el-table-column label="课程ID" prop="lessonId" align="center" />
      <el-table-column label="课程名称" width="300" align="center" prop="lessonName" />
      <el-table-column label="课程介绍" width="500" align="center" prop="introduction"></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="view(scope.row)">查看</el-button>
          <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteOk(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total,sizes,prev,pager,next" :total="total" :current-page.sync="search.pageCurrent" :page-size.sync="search.pageSize" :page-sizes="[10,20,30,40]" @size-change="fetchData" @current-change="fetchData"></el-pagination>
    <!-- <el-pagination layout="total,sizes,prev,pager,next" :total="total" :current-page.sync="search.pageCurrent" :page-size.sync="search.pageSize" :page-sizes="[10,20,30,40]" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination> -->
    <el-dialog title="编辑" :visible.sync="editVisible">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="昵称">
          <el-input v-model="editForm.nickname" disabled></el-input>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input v-model="editForm.lessonName"></el-input>
        </el-form-item>
        <el-form-item label="课程介绍">
          <el-input v-model="editForm.introduction"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button @click="editOk">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="添加" :visible.sync="addVisible">
      <el-form :model="addForm" label-width="80px">
        <!-- <el-form-item label="昵称">
          <el-input v-model="addForm.nickname"></el-input>
        </el-form-item> -->
        <el-form-item label="课程名称">
          <el-input v-model="addForm.lessonName"></el-input>
        </el-form-item>
        <el-form-item label="课程介绍">
          <el-input v-model="addForm.introduction"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addCancel">取消</el-button>
        <el-button @click="addOk">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getLessons,edit,insert,change } from '@/api/lesson'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      search: {
        id: null,
        name: '',
        pageSize: 10,
        pageCurrent: 1
      },
      searchReset: {
        id: null,
        name: '',
        pageSize: 10,
        pageCurrent: 1
      },
      total:0,
      editVisible:false,
      addVisible:false,
      editForm:{
        nickname:'',
        userId:null,
        lessonId:null,
        lessonName:'',
        isShow:1,
        introduction:''
      },
      addForm:{
        // nickname:'',
        lessonName:'',
        introduction:'',
        // userId:0,
        isShow:1
      },
    
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    view(row) {
      console.log(row)
      this.$router.push({path:'/lesson/chapter',query:{lessonId:row.lessonId}})
    },
    edit(row) {
      console.log(row)
      this.editVisible=true
      this.editForm.nickname=row.nickname
      this.editForm.lessonName=row.lessonName
      this.editForm.introduction=row.introduction
      this.editForm.lessonId=row.lessonId
      this.editForm.userId=row.userId
    },
    // handleSizeChange(){
    //   this.fetchData()
    // },
    // handleCurrentChange(){
    //   this.fetchData()
    // },
    // searchOn(){
    //   this.fetchData()
    // },
    resetOn(){
      this.search=this.searchReset
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getLessons(this.search).then(response => {
        this.list = response.data.records
        this.total=response.data.total
        this.listLoading = false
      })
    },
    add(){
      this.addVisible=true
    },
    addCancel(){
      this.addVisible=false
    },
   addOk(){
      
      insert(this.addForm).then((success)=>{
        console.log(success)
        this.addVisible=false
        this.fetchData()
      })
    },
    
    editCancel(){
      this.editVisible=false
    },
    editOk(){
      
      edit(this.editForm).then((success)=>{
        console.log(success)
        this.editVisible=false
        this.fetchData()
      })
    },
    deleteOk(row){
      let obj={
        id:row.lessonId,
        status:0
      }
      change(obj).then((success)=>{
        console.log(success)
        this.fetchData()
      })
    }
  }
}
</script>
